import React from 'react';
import { PlusOutlined, MinusOutlined, HomeOutlined, ExpandOutlined } from '@ant-design/icons';
import type { ViewportState } from '@/hooks/useViewport';

/**
 * 视口控制组件属性接口
 */
interface ViewportControlsProps {
  /** 当前视口状态 */
  viewport: ViewportState;
  /** 放大回调 */
  onZoomIn: () => void;
  /** 缩小回调 */
  onZoomOut: () => void;
  /** 重置回调 */
  onReset: () => void;
  /** 适应画布回调 */
  onFitToCanvas: () => void;
  /** 是否显示缩放信息 */
  showZoomInfo?: boolean;
  /** 控制器位置 */
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
  /** 自定义样式类名 */
  className?: string;
  /** 是否可以放大 */
  canZoomIn?: boolean;
  /** 是否可以缩小 */
  canZoomOut?: boolean;
}

/**
 * 视口控制组件
 * 提供缩放、重置、适应等视口操作控制
 */
const ViewportControls: React.FC<ViewportControlsProps> = ({
  viewport,
  onZoomIn,
  onZoomOut,
  onReset,
  onFitToCanvas,
  showZoomInfo = true,
  position = 'top-right',
  className = '',
  canZoomIn = true,
  canZoomOut = true,
}) => {
  // 根据位置确定样式类
  const getPositionClass = () => {
    switch (position) {
      case 'top-left':
        return 'top-4 left-4';
      case 'bottom-left':
        return 'bottom-4 left-4';
      case 'bottom-right':
        return 'bottom-4 right-4';
      case 'top-right':
      default:
        return 'top-4 right-4';
    }
  };

  return (
    <>
      {/* 缩放信息显示 */}
      {showZoomInfo && (
        <div className="absolute bottom-4 left-4 bg-white px-3 py-1 rounded shadow-md text-sm border">
          缩放: {Math.round(viewport.scale * 100)}%
        </div>
      )}

      {/* 控制按钮组 */}
      <div className={`absolute ${getPositionClass()} flex flex-col gap-1 ${className}`}>
        <button
          onClick={onZoomIn}
          className="w-9 h-9 bg-white rounded shadow-md flex items-center justify-center hover:bg-gray-50 border transition-colors"
          title="放大 (Ctrl + 滚轮向上)"
          disabled={!canZoomIn}
        >
          <PlusOutlined className="text-gray-600" />
        </button>

        <button
          onClick={onZoomOut}
          className="w-9 h-9 bg-white rounded shadow-md flex items-center justify-center hover:bg-gray-50 border transition-colors"
          title="缩小 (Ctrl + 滚轮向下)"
          disabled={!canZoomOut}
        >
          <MinusOutlined className="text-gray-600" />
        </button>

        <button
          onClick={onReset}
          className="w-9 h-9 bg-white rounded shadow-md flex items-center justify-center hover:bg-gray-50 border transition-colors text-xs font-bold"
          title="重置缩放和位置"
        >
          1:1
        </button>

        <button
          onClick={onFitToCanvas}
          className="w-9 h-9 bg-white rounded shadow-md flex items-center justify-center hover:bg-gray-50 border transition-colors"
          title="适应画布大小"
        >
          <ExpandOutlined className="text-gray-600" />
        </button>
      </div>
    </>
  );
};

export default ViewportControls;
